<template>
  <div class="add-form">
    <!-- 添加用户表单组件 -->
    <el-dialog
      :title="text + pageTitle"
      :visible="showAddUser"
      @close="handleClose"
    >
      <el-form
        :rules="ruleInline"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left: 120px"
      >
        <!-- 用户名 -->
        <el-form-item :label="$t('table.username')" prop="username">
          <el-input v-model="formBase.username"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item :label="$t('table.email')" prop="email">
          <el-input v-model="formBase.email"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item
          :label="$t('table.paddword')"
          prop="password"
          v-if="formBase.password != undefined"
        >
          <el-input v-model="formBase.password"></el-input>
        </el-form-item>

        <!-- 角色 -->
        <el-form-item :label="$t('table.role')" prop="role">
          <el-input v-model="formBase.role"></el-input>
        </el-form-item>
        <!-- 权限组 -->
        <el-form-item
          :label="$t('table.permissionUser')"
          prop="permission_group_id"
        >
          <el-select class="filter-item" v-model="formBase.permission_group_id">
            <el-option
              v-for="item in PermissionGroupsList"
              :value="item.id"
              :key="item.key"
              :label="item.title"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 联系电话 -->
        <el-form-item :label="$t('table.phone')" prop="phone">
          <el-input v-model="formBase.phone"></el-input>
        </el-form-item>

        <!-- 头像上传下一个版本再做 -->
        <!-- <el-form-item :label="$t('table.avatar')" prop="avatar">
            <el-upload
              class="upload-demo"
              :action="importFileUrl"
              :on-change="handleChange"
              :file-list="fileList" accept="image/jpeg,image/gif,image/png,image/bmp"
              :before-upload="beforeAvatarUpload">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>-->
        <!-- 介绍 -->
        <el-form-item :label="$t('table.introduction')">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="Please input"
            v-model="formBase.introduction"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="createData">{{
          $t('table.confirm')
        }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { update, add } from '@/api/base/users'
export default {
  name: 'usersAdd',
  props: {
    showAddUser: {
      type: Boolean,
      required: true
    },
    text: {
      type: String
      // required: true
    },
    pageTitle: {
      type: String
      // required: true
    },
    PermissionGroupsList: {
      type: Array
    },
    formBase: {
      type: Object
    }
  },
  // [
  //   'text',
  //   'pageTitle',
  //   'PermissionGroupsList',
  //   'formBase',
  //   'ruleInline',
  //   'showAddUser' // 控制组件弹层的展示
  // ],
  data () {
    return {
      ruleInline: {
        username: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        email: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入角色名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  methods: {
    // // 弹层显示
    // dialogFormV () {
    //   // this.showAddUser = true
    // },
    // // 弹层隐藏
    // dialogFormH () {
    //   // this.showAddUser = false
    // },

    // 关闭弹层
    handleClose () {
      this.$emit('handleCloseModal') // 触发父组件事件 关闭弹层
      this.$refs.dataForm.resetFields() // 重置表单校验
    },

    // 表单提交
    createData () {
      this.$refs.dataForm.validate(async (valid) => {
        if (valid) {
          const data = {
            avatar: null,
            email: this.formBase.email,
            id: this.formBase.id,
            introduction: this.formBase.introduction,
            permission_group_id: this.formBase.permission_group_id,
            phone: this.formBase.phone,
            role: this.formBase.role,
            username: this.formBase.username
          }
          if (this.formBase.id) {
            await update(data)
            // console.log(res, '编辑')
            // this.$router.go(0)
            this.$emit('load-user-list') // 重新加载页面
            this.$message.success('编辑用户成功')
          } else {
            await add(this.formBase)
            // console.log(res, '添加')
            this.$emit('load-user-list')
            this.$message.success('添加用户成功')
          }
          this.$emit('handleCloseModal')
        } else {
          this.$message.error('信息填写错误')
        }
      })
    }
  },
  // 挂载结束

  mounted: function () {},
  // 创建完毕状态
  created () {},
  // 组件更新
  updated: function () {}
}
</script>
<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
</style>
